<template>
  <div class="menu" :class="[pageName]">
    <ul>
      <template v-for="(item, index) in menuList" :key="index">
        <li v-if="item.id === 1" class="active" @click="handleClick(item)">
          {{ item.name }}
        </li>
        <li v-else>{{ item.name }}</li>
      </template>
      <!-- <li v-for="item in menuList" :key="item.id" @click="handleClick(item)">
        {{ item.name }}
      </li> -->
	  
	  
    </ul>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const pageName = computed(() => route.name || "home");

interface MenuItem {
  id: number;
  name: string;
  route: string;
}

const menuList = ref<MenuItem[]>([
  { id: 1, name: "首页", route: "/home" },
  { id: 2, name: "关于", route: "/about" },
  { id: 3, name: "联系", route: "/contact" },
  { id: 4, name: "服务", route: "/services" },
  { id: 5, name: "产品", route: "/products" },
  { id: 6, name: "支持", route: "/support" },
  { id: 7, name: "博客", route: "/blog" },
  { id: 8, name: "隐私政策", route: "/privacy" },
  { id: 9, name: "条款", route: "/terms" },
  { id: 10, name: "帮助", route: "/help" },
  { id: 11, name: "反馈", route: "/feedback" },
  { id: 12, name: "设置", route: "/settings" },
]);

const handleClick = (item: MenuItem) => {
  console.log("Clicked menu item:", item);
  // 在这里可以添加导航逻辑，例如使用 vue-router
};
</script>

<style scoped lang="scss">
.menu {
  box-sizing: border-box;
  width: 12.5rem;
  min-width: 0;
  background-color: #f5f5f5;
  opacity: 1;
  margin-left: 0rem;
  transition: all 0.3s ease-in-out;

  // &.login {
  //   margin-left: -12.5rem;
  //   opacity: 0;
  // }
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  box-sizing: border-box;
  padding: 0 0.625rem 0 1.25rem;
  cursor: pointer;
  transition: background-color 0.3s;
  min-height: 3rem;
  line-height: 3rem;
  font-size: 1rem;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  &:last-child {
    border-bottom: none;
  }
}

.menu li:hover {
  background-color: #e0e0e0;
}
</style>
